<template>
  <div class="bgff">
    <div class="p20">
      <div class>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
        <el-button type="primary">搜索</el-button>
      </div>
      <div class="tx-c myck mt30">
        <el-checkbox-group v-model="legendData">
          <el-checkbox :label="it" name="type" v-for="it in legendDrawData" :key="it"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div id="myChart77" style="height:400px;width:100%;"></div>
    </div>
  </div>
</template>

<script>
import { _historyList } from "@/http/ajax";
export default {
  name: "history",
  data() {
    return {
      value1: "",
      legendData: [
        "剩余电流变化图（阀值：25mA）",
        "实时电流变化图（阀值：120A）",
        "温度趋势变化图（阀值：60℃）",
        "电压趋势变化图（阀值：250V）",
        "功率趋势变化图（阀值：2500W）",
        "电量趋势变化图"
      ],
      legendDrawData: [
        "剩余电流变化图（阀值：25mA）",
        "实时电流变化图（阀值：120A）",
        "温度趋势变化图（阀值：60℃）",
        "电压趋势变化图（阀值：250V）",
        "功率趋势变化图（阀值：2500W）",
        "电量趋势变化图"
      ]
    };
  },
  watch: {
    legendData(val) {
      this.drawBar();
    }
  },
  mounted() {
    this.drawBar();
    let data = {
      size: 20,
      page: 0,
      startTime: "2019-08-15",
      endTime: "2019-08-16",
      imei: "868575028264663"
    };
    _historyList(data, res => {}, err => {});
  },
  methods: {
    drawBar() {
      let myChart = this.$echarts.init(document.getElementById("myChart77"));
      let option = {
        title: {
          text: this.legendData.length === 1 ? this.legendData[0] : "变化图"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          show: false,
          data: this.legendDrawData,
          bottom: 0
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "6%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1", "2", "3", "4", "5", "6", "7"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: this.legendDrawData[0],
            type: "line",
            stack: "总量1",
            data: [2, 5, 6, 8, 9, 4, 1],
            lineStyle: {
              normal: {
                color: "#41b508",
                width: 2
              }
            }
          },
          {
            name: this.legendDrawData[1],
            type: "line",
            stack: "总量2",
            data: [0.1, 0.9, 0.4, 0.4, 0.6, 0.6, 0.7],
            lineStyle: {
              normal: {
                color: "#1185aa",
                width: 2
              }
            }
          },
          {
            name: this.legendDrawData[2],
            type: "line",
            stack: "总量3",
            data: [150, 232, 201, 154, 190, 330, 410],
            lineStyle: {
              normal: {
                color: "#41b508",
                width: 2
              }
            }
          },
          {
            name: this.legendDrawData[3],
            type: "line",
            stack: "总量4",
            data: [320, 332, 301, 334, 390, 330, 320],
            lineStyle: {
              normal: {
                color: "#409EFF",
                width: 2
              }
            }
          },
          {
            name: this.legendDrawData[4],
            type: "line",
            stack: "总量5",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            lineStyle: {
              normal: {
                color: "#c208e6",
                width: 2
              }
            }
          },
          {
            name: this.legendDrawData[5],
            type: "line",
            stack: "总量6",
            data: [520, 432, 501, 334, 1400, 1130, 1220],
            lineStyle: {
              normal: {
                color: "#c208e6",
                width: 2
              }
            }
          }
        ]
      };
      let obj = {};
      myChart.setOption(option);
      var selectArr = myChart.getOption().legend[0].data; //legend所有值
      var checkboxs = document.getElementsByName("checkboxchart");
      this.legendDrawData.forEach(e => {
        let isin = false;
        this.legendData.forEach(d => {
          if (e === d) {
            isin = true;
          }
        });
        if (isin) {
          obj[e] = true;
        } else {
          obj[e] = false;
        }
      });
      option.legend.selected = obj;
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="scss">
.myck {
  .el-checkbox.is-checked:nth-of-type(1) {
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #41b508;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #41b508;
      border-color: #41b508;
    }
  }
  .el-checkbox.is-checked:nth-of-type(2) {
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #1185aa;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #1185aa;
      border-color: #1185aa;
    }
  }
  .el-checkbox.is-checked:nth-of-type(3) {
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #a11;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #a11;
      border-color: #a11;
    }
  }
  .el-checkbox.is-checked:nth-of-type(5) {
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #c208e6;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #c208e6;
      border-color: #c208e6;
    }
  }
}
</style>
